<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<!-- head 头部-->
<head th:replace="admin/layout/include::head('配置管理','')"></head>

<body>
<!-- loading 动画-->
<div th:replace="admin/layout/include::loading"></div>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" style="min-height: 640px;">


            <div class="layui-tab" lay-filter="configTab">
                <ul class="layui-tab-title">
                    <li lay-id="system">网站设置</li>
                    <li lay-id="upload">上传配置</li>
                    <li lay-id="layout">布局配置</li>
                    <li lay-id="ad">广告配置</li>
                    <li lay-id="other">其他配置</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item">
                        <div class="layui-col-md6">
                            <form class="layui-form model-form"  lay-filter="system">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" lay-tips="网站标题栏显示标题" >网站名称</label>
                                        <div class="layui-input-block">
                                            <input name="siteTitle"class="layui-input" type="text" placeholder="输入网站名称"/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" lay-tips="SEO关键词，多个用英文逗号隔开">网站关键词</label>
                                        <div class="layui-input-block">
                                            <input name="siteKeywords"  class="layui-input" type="text" placeholder="输入网站关键词"/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">网站描述</label>
                                        <div class="layui-input-block">
                                            <textarea name="siteDesc" class="layui-textarea"placeholder="输入网站描述"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">网站LOGO</label>
                                        <div class="layui-input-block">
                                            <input id="logo" name="logo" placeholder="网站LOGO" type="text" class="layui-input"/>
                                            <button id="btnSel" type="button" class="layui-btn formBtn" style="position: absolute;right: 0;top:0;">选择
                                            </button>
                                            <button id="btnV" type="button" class="layui-btn formBtn" style="position: absolute;top: 0;right: 65px;">查看
                                            </button>
                                        </div>
                                    </div>
                                    <!--<div class="layui-form-item">
                                        <label class="layui-form-label">图片懒加载</label>
                                        <div class="layui-input-block">
                                            <input type="checkbox" id="state" name="state" lay-skin="switch" value="0" checked lay-text="开启|禁用">
                                        </div>
                                    </div>-->
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" lay-tips="网站底部版权，支持html">底部版权</label>
                                        <div class="layui-input-block">
                                            <textarea name="siteFooter" class="layui-textarea" placeholder="输入底部版权"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item" style="margin-top: 30px;">
                                        <button class="layui-btn layui-btn-primary icon-btn" type="reset">
                                            <i class="layui-icon">&#x1006;</i>重置
                                        </button>
                                        <button class="layui-btn icon-btn" lay-filter="sysConfig-submit" lay-submit>
                                            <i class="layui-icon">&#xe605;</i>提交
                                        </button>
                                    </div>
                            </form>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-col-md6">
                            <form class="layui-form model-form"  lay-filter="uploadConfig">
                                <div class="layui-form-item">
                                    <label class="layui-form-label" lay-tips="上传配置" >网站名称</label>
                                    <div class="layui-input-block">
                                        <input name="siteTitle"class="layui-input" type="text" placeholder="输入网站名称"/>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label" lay-tips="SEO关键词，多个用英文逗号隔开">网站关键词</label>
                                    <div class="layui-input-block">
                                        <input name="siteKeywords"  class="layui-input" type="text" placeholder="输入网站关键词"/>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">网站描述</label>
                                    <div class="layui-input-block">
                                        <textarea name="siteDesc" class="layui-textarea"placeholder="输入网站描述"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">图片懒加载</label>
                                    <div class="layui-input-block">
                                        <input type="checkbox" id="state" name="state" lay-skin="switch" value="0" checked lay-text="开启|禁用">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label" lay-tips="网站底部版权，支持html">底部版权</label>
                                    <div class="layui-input-block">
                                        <textarea name="siteFootCopy" class="layui-textarea" placeholder="输入底部版权"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item" style="margin-top: 30px;">
                                    <button class="layui-btn layui-btn-primary icon-btn" type="reset">
                                        <i class="layui-icon">&#x1006;</i>重置
                                    </button>
                                    <button class="layui-btn icon-btn" lay-filter="sysUpload-submit" lay-submit>
                                        <i class="layui-icon">&#xe605;</i>提交
                                    </button>
                                </div>
                            </form>
                        </div>


                    </div>
                    <div class="layui-tab-item">内容3</div>
                    <div class="layui-tab-item">内容4</div>
                    <div class="layui-tab-item">内容5</div>
                </div>
            </div>


        </div>
    </div>
</div>
</body>

<!-- 表格操作列 -->
<script type="text/html" id="data-table-bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- js部分 -->
<div th:replace="admin/layout/include::js"></div>
<script>
    layui.use(['element','form', 'table', 'util', 'admin','fileChoose'], function () {
        var form = layui.form;
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var admin = layui.admin;
        var fileChoose = layui.fileChoose;

        var formUrl;  // 表单提交的action

        element.on('tab(configTab)', function(data){
            var configType=this.getAttribute("lay-id")
            B.get({
                url:'/admin/config/getConfig',
                data:{configType:configType},
                loading:true,
                success:function (res) {
                    if(res.success){
                        form.val(configType,res.data);


                    }else{

                    }
                }
            });
        });
        // 默认监听点击第一个tab
        element.tabChange('configTab',"system");
        // 文件选择
        $('#btnSel').click(function () {
            fileChoose.open({
                fileUrl: '',
                listUrl: '/api/file/list',
                dialog: {
                    offset: '60px'
                },
                response:{
                    isDir:'dir'
                },
                upload:{
                    url:'/api/file/upload',
                    method:'POST'
                },
                onChoose: function (images) {
                    $('#logo').val(images[0].url);
                    //layer.msg('你选择了：' + JSON.stringify(urls), {icon: 1});
                }
            });

            /*layer.open({
                type: 2,
                title: '选择文件',
                content: 'http://javabb.cn:8082/fileChoose.html?accept=image',
                area: ['600px', '420px'],
                offset: '50px',
                shade: .1,
                fixed: false,
                resize: false,
                success: function(layero, index){
                    window.addEventListener('message',function(e){
                        if (typeof(e.data.mFsUrls) != "undefined" && e.data.mFsUrls.length > 0) {
                            $('#catalogImage').val(e.data.mFsUrls[0]);
                        }else{
                            B.error("发生错误");
                        }
                        layer.close(index);
                    },false);
                }
            });*/

        });
        // 查看
        $('#btnV').click(function () {
            var url = $('#logo').val();
            if (!url) {
                layer.msg('请先选择', {icon: 2});
            } else {
                layer.photos({
                    photos: {data: [{src: url}]}, anim: 5, shade: .1, closeBtn: 2
                });
            }
        });
        function submit(data){
            console.log(data) //当前容器的全部表单字段，名值对形式：{name: value}
            // 表单提交事件
            B.post({
                url: '/admin/config/saveMap',
                loading: true,
                data: data,
                success: function (data) {
                    if (data.success) {
                        layer.msg(data.msg, {icon: 1});
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                }
            });
        }
        form.on('submit(sysConfig-submit)', function(data){
           submit(data.field);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


    });

</script>
</html>